<template>
  <a-col :md="24" :sm="24">
    <a-divider v-if="propIsEmpty()">动态字段</a-divider>
    <FormProvider :form="searchForm">
      <SchemaField :schema="schema" />
    </FormProvider>
  </a-col>
</template>

<script>
import { createForm } from '@formily/core' // isVoidField
import { FormProvider, createSchemaField, Schema } from '@formily/vue'
import { FormItem, FormGrid, Input, InputNumber, DatePicker } from '@formily/antdv'

import XEUtils from 'xe-utils'

const { SchemaField } = createSchemaField({
  components: {
    FormItem,
    FormGrid,
    Input,
    InputNumber,
    DatePicker
  }
})
export default {
  name: 'JsonQuery',
  components: {
    FormProvider,
    SchemaField
  },

  props: {
    fieldProp: {
      type: Object,
      default: () => {
        return {}
      },
      require: false
    }
  },
  created() {
    Schema.registerTypeDefaultComponents({
      string: 'Input',
      number: 'InputNumber',
      date: 'DatePicker'
    })
    Schema.enablePolyfills(['1.0'])
  },
  data () {
    return {
      searchForm: createForm({
        validateFirst: true
      }),
      schema: {
        type: 'object',
        properties: {
          grid: {
            type: 'void',
            'x-component': 'FormGrid',
            'x-component-props': {
              minColumns: 3,
              maxColumns: 3,
              columnGap: 40
            },
            properties: this.fieldProp
          }
        }
      }
    }
  },
  methods: {
    propIsEmpty() {
      return !XEUtils.isEmpty(this.schema.properties.grid.properties)
    },
    getSearchForm() {
      return this.searchForm
    }
  }

}
</script>

<style scoped>

</style>
